@import './reset';

@function getVw($w) {
  @return calc($w/375) * 100+vw;
}

$fontColor: #555555;

.wrap {
  header {
    nav {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: getVw(15) 0;

      .back {
        font-size: getVw(22);
        margin-left: getVw(10);
      }

      .logo {
        width: getVw(76.64);
        height: getVw(40.8);
      }

      .unfold {
        font-size: getVw(17);
        margin-right: getVw(19);
      }
    }
  }

  main {
    .banner {
      img {
        display: block;
        width: 100%;
      }
    }

    .specification {
      .name {
        font-size: getVw(15);
        // font-family: PingFang SC;
        color: $fontColor;
        padding-left: getVw(15);
        margin: getVw(15) 0;
      }

      .sale {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e9ecf0;
        padding: 0 getVw(15);
        padding-bottom: getVw(15);

        .price {
          font-size: getVw(20);
          color: #ff734c;

          span {
            font-size: getVw(14);
            text-decoration: line-through;
            color: #b4babf;
          }
        }

        .num {
          font-size: getVw(12);
          color: $fontColor;
        }
      }

      .spec {
        margin: 0 getVw(15);

        .specItem {
          display: flex;
          margin-top: getVw(12);

          .cate {
            font-size: getVw(14);
            color: $fontColor;
            margin-right: getVw(27);
          }

          .info {
            flex-grow: 1;
            padding-bottom: getVw(12);
            border-bottom: 1px solid #e9ecf0;

            p {
              font-size: getVw(14);
              color: $fontColor;
            }
          }
        }

        & .specItem:last-child {
          .info {
            border-bottom: none;
          }
        }
      }
    }

    .add {
      display: flex;
      margin: 0 getVw(15);
      border-top: getVw(7.5) solid #e9ecf0;
      border-bottom: getVw(7.5) solid #e9ecf0;
      padding: getVw(15) 0;
      align-items: center;

      p {
        font-size: getVw(14);
        color: $fontColor;
        margin-right: getVw(47);
      }

      .n {
        border: 1px solid #dddddd;

        label {
          display: inline-block;
          width: getVw(32);
          height: getVw(33);
          background-color: #f5f5f5;
          // border: 1px solid #dddddd;
          font-size: getVw(20);
          color: $fontColor;
          text-align: center;
          line-height: getVw(32);
          outline-style: none;
        }

        & label:nth-of-type(1) {
          border-right: 1px solid #dddddd;
        }

        & label:nth-of-type(2) {
          border-left: 1px solid #dddddd;
        }

        input {
          width: getVw(48);
          height: getVw(32);
          text-align: center;
          border: none;
          outline-style: none;
          // border-top: 1px solid #dddddd;
          // border-bottom: 1px solid #dddddd;
        }
      }
    }

    .comment {
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: getVw(14) getVw(15) getVw(17);

        h3 {
          font-size: getVw(16);
          color: $fontColor;
          font-weight: normal;
        }

        p {
          font-size: getVw(12);
        }
      }

      .content {
        .contItem {
          border-top: 1px solid #e9ecf0;

          .user {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: getVw(10);
            margin-bottom: getVw(14);

            .left {
              display: flex;

              // align-items: center;
              img {
                width: getVw(20);
                height: getVw(20);
                display: block;
                margin-right: getVw(17.5);
                margin-left: getVw(15);
              }

              p {
                font-size: getVw(14);
                color: $fontColor;
              }
            }

            img {
              width: getVw(13);
              height: getVw(14);
              display: block;
              margin-right: getVw(15);
            }
          }

          .text {
            font-size: getVw(14);
            color: $fontColor;
            padding: 0 getVw(15);
            margin-bottom: getVw(14);
          }

          .imgBox {
            img {
              width: getVw(55);
              height: getVw(75);
              margin-left: getVw(15);
              margin-bottom: getVw(26);
            }
          }
        }
      }

      .moreComment {
        button {
          font-size: getVw(12);
          width: getVw(84);
          height: getVw(29);
          margin-left: 50%;
          transform: translateX(-50%);
          margin-top: getVw(15);
          margin-bottom: getVw(30);
          color: #232628;
          background-color: #fff;
          border: 1px solid #232628;
        }
      }
    }

    .detail {
      margin-bottom: getVw(115);

      h2 {
        font-size: getVw(16.5);
        font-weight: normal;
        margin-left: getVw(15);
      }

      li {
        img {
          width: 100%;
        }
      }
    }

  }
}

.buy {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  display: flex;

  .left {
    display: flex;
    flex-grow: 1;
    align-items: center;

    li {
      flex-grow: 1;
      text-align: center;
      border-right: 1px solid #e9ecf0;

      .icon {
        margin-top: getVw(6);

        i {
          font-size: getVw(25);
        }
      }

      p {
        font-size: getVw(14);
      }
    }
  }

  .right {
    display: flex;

    li {
      width: getVw(112);
      height: getVw(50);
      font-size: getVw(14);
      color: #fff;
      line-height: getVw(50);
      text-align: center;

      &:first-of-type {
        background-color: #3d4d42;
      }

      &:last-of-type {
        a {
          display: block;
          background-color: #ff734c;
          color: #fff;
        }
      }
    }
  }
}